<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的证照</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #fff;
			}
			
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			
			.mui-pull-top-tips .mui-pull-loading {
				margin: 0;
			}
			
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #f3f3f3;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			
			.mui-bar-nav~.mui-content {
				padding: 0;
				margin-top: 45px;
				background: #fff;
			}
			
			.mui-segmented-control {
				background: #fff;
				height: .87rem;
				padding: 0 .5rem;
				box-sizing: border-box;
				box-shadow: 0 0 5px 1px #ccc;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #1653fc;
				border-color: #1653fc;
			}
			/*我的证照库*/
			
			.license_top {
				width: 7.05rem;
				overflow: hidden;
				margin: .2rem auto;
				padding: .4rem;
				box-sizing: border-box;
				background: #f3f3f3;
				border-radius: .08rem;
			}
			
			.license_top>p {
				margin-bottom: .2rem;
				color: #333;
				font-size: .3rem;
			}
			
			.license_top>.mui-btn-warning {
				width: 2.42rem;
				height: .7rem;
				background: #ff7800;
				font-size: .32rem;
				margin-left: 1.9rem;
			}
			
			.license_top>span {
				width: 100%;
				float: left;
				text-align: center;
				color: #b0b0b0;
				font-size: .28rem;
				line-height: .6rem;
			}
			
			.mui-table-view .mui-media-body {
				width: 6rem;
				float: left;
				overflow: visible;
				margin-left: .1rem;
			}
			
			.mui-table-view .mui-media-body>div {
				width: 100%;
				float: left;
			}
			
			.mui-table-view .mui-media-body .body_view {
				font-size: .3rem;
			}
			
			.mui-table-view .mui-media-body .body_view>span,
			.mui-table-view .mui-media-body .mui-ellipsis>span {
				float: left;
				width: 4rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				line-height: .5rem;
			}
			
			.mui-table-view .mui-media-body .work_time {
				color: #b0b0b0;
				font-size: .28rem;
			}
			
			.work_time .licence_num {
				width: 4.5rem;
				overflow: hidden;
				float: left;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			.work_time .jibei {
				font-size: .32rem;
				color: #b0b0b0;
				margin-right: .25rem;
			}
			
			.mui-table-view .mui-media-body .mui-ellipsis {
				color: #b0b0b0;
				font-size: .28rem;
				overflow: visible;
			}
			
			.mui-table-view-cells {
				padding: 0;
				margin-bottom: .15rem;
				background: #fff;
				position: sticky;
				z-index: -10;
			}
			
			.mui-media-box {
				padding: .38rem 0 0 .25rem;
				float: left;
			}
			
			.mui-table-view-cells>a:not(.mui-btn) {
				margin: 0;
				padding: 0;
			}
			
			.mui-push-right:after {
				content: "";
			}
			
			.mui-table-view-cells:after,
			.mui-table-view:before,
			.mui-table-view:after {
				height: 0;
			}
			
			.evaluate {
				width: 100%;
				border-top: 1px solid #ececec;
				height: .9rem;
				font-size: .3rem;
				text-align: center;
				margin-top: .2rem;
				float: left;
			}
			
			.evaluate>a {
				display: inline-block;
				width: 1.73rem;
				margin: 0 .28rem;
				line-height: .9rem;
				color: #666;
			}
			
			.mui-slider .mui-slider-group .evaluate>a>img {
				float: left;
				width: .36rem;
				margin: .26rem .1rem 0 0;
			}
			
			.mui-table-view {
				background: #eeeeee;
				position: sticky;
			}
			
			.navigate_img {
				width: .9rem;
				height: .9rem;
				display: block;
				border-radius: .04rem;
				float: left;
				margin-right: .13rem;
				margin-top: .01rem;
			}
			
			.navigate_img>img {
				width: .9rem !important;
				margin: 0;
				max-height: .9rem;
			}
			/*我的自制材料*/
			
			.mui-slider .mui-slider-group .licence_upload>p>img {
				width: .3rem;
				float: left;
				margin-right: .18rem;
				margin-top: .06rem;
			}
			
			.licence_upload>p>span {
				color: #d77a28;
			}
			
			.licence_upload .file_sum {
				width: 100%;
				float: left;
				text-align: center;
				font-size: .6rem;
				line-height: .55rem;
			}
			
			.licence_upload .mui-btn-warning {
				background: #22ac38;
				margin-top: .05rem;
				border-color: #22ac38;
			}
			
			.mui-table-view .icon-more {
				width: .45rem !important;
				float: right !important;
				height: .45rem;
				position: relative;
				background: url(../../../images/work/icon-gd-@2x.png) no-repeat;
				background-size: 100% 100%;
				margin-right: .24rem;
				background-position: center center);
			}
			
			.mui-table-view .icon-more>img {
				margin-top: -.03rem;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				border-bottom: 2px solid #007aff;
			}
			/*弹层*/
			
			.more_message {
				width: 7rem;
				top: .5rem;
				background: #fff;
				border-radius: .06rem;
				position: absolute;
				right: .25rem;
				z-index: 5;
				border: 1px solid #e2e2e2;
				display: none;
			}
			
			.more_message .more_message_box {
				position: relative;
				width: 100%;
				float: left;
				padding: .35rem .38rem;
				box-sizing: border-box;
			}
			
			.more_message .more_message_box>i {
				width: .2rem;
				height: .2rem;
				position: absolute;
				top: -.15rem;
				right: .15rem;
				background: url(../../../images/work/arrow_up.png) no-repeat;
			}
			
			.bg_gray {
				width: 7.5rem;
				background: rgba(0, 0, 0, 0.3);
				height: 18rem;
				position: fixed;
				top: -.9rem;
				z-index: 3;
				right: 0;
			}
			
			.mui-icon-trash {
				font-size: .4rem;
				color: #8c8c8c;
				float: left;
				margin-right: .05rem;
			}
			
			.message_info {
				font-size: .28rem;
			}
			
			.mui-popover {
				height: 140px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
					<div class="mui-scroll" style="position: inherit; margin: auto;">
						<a class="mui-control-item mui-active" href="#item1mobile">
							我的证照库
						</a>
						<a class="mui-control-item" href="#item2mobile">
							我的自制材料
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="license_top">
									<p>系统通过用户证件号码（个人以身份证为唯一标识，法人以统一社会信用代码为唯一标识）自动同步、采集省、市两级政务电子证照库中各类证照、批文等电子证照信息。</p>
									<!--<button type="button" class="mui-btn mui-btn-warning" id="synEleclicenList">同步证照库</button>-->
									<span id="synDate_time"></span>
								</div>
								<ul class="mui-table-view" id="item_ul_1">
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="license_top licence_upload">
									<p>
										<!--<img src="../../../images/license/tx.png">-->
										<span>自制材料上传固定容量为<span id="totalRl"></span>。超过固定容量的，需清理后才能上传。</span>
									</p>
									<div class="file_sum" id="runOut"></div>
									<span style="margin-top: 10px;"></span>
									<button type="button" class="mui-btn mui-btn-warning" id="sccl">上传材料</button>
								</div>
								<ul class="mui-table-view" id="item_ul_2">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--弹层-->
		<div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view" id="middlePopoverUl">
					</ul>
				</div>
			</div>
		</div>
		<script>
			function my_immersed(immersed) {}
		</script>
		<script src="../../../js/immersed.js"></script>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../../../js/jquery2.2.4.min.js"></script>
		<script src="../../../js/mui.pullToRefresh.js"></script>
		<script src="../../../js/mui.pullToRefresh.material.js"></script>
		<script src="../../../js/app.js"></script>
		<script>
			var pageNumber_0 = 0; //当前页码
			var pageNumber_1 = 0; //当前页码
			var pageSize = 5; //每页显示的条数
			var maxPageNumber_0 = 1; //最大页数
			var maxPageNumber_1 = 1; //最大页数
			var pullToRefresh_0 = null;
			var pullToRefresh_1 = null;
			mui.init();
			mui.plusReady(function() {
				initData();
			});
			function initData(){
				if(!pullToRefresh_0||!pullToRefresh_1){
					setTimeout(initData,200);
					return;
				}
				pullToRefresh_0.pullUpLoading();
				pullToRefresh_1.pullUpLoading();
			}
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration: deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						var pullToRefresh = $(pullRefreshEl).pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									var ul = self.element.querySelector('.mui-table-view');
									var pageNumber = 1;
									pageNumber_0 = 1;
									pageNumber_1 = 1;
									createFragment(index, pageNumber, pageSize, function(data) {
										var fragment = getAppEleclicenList(index, data);
										if(fragment == '' || fragment == 'error') {
											self.endPullDownToRefresh(true);
										} else {
											self.refresh(true); //这句很关键！有重新触发上拉加载
											ul.innerHTML = '';
											ul.insertBefore(fragment, ul.firstChild);
											self.endPullDownToRefresh();
										}
									})
								}
							},
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										var pageNumber;
										var tempNum;
										if(index == 0) {
											pageNumber_0++; //翻下一页
											pageNumber = pageNumber_0;
											tempNum = maxPageNumber_0;
										}
										if(index == 1) {
											pageNumber_1++; //翻下一页
											pageNumber = pageNumber_1;
											tempNum = maxPageNumber_1;
										}
										if(pageNumber <= tempNum) {
											createFragment(index, pageNumber, pageSize, function(data) {
												var fragment = getAppEleclicenList(index, data);
												if(fragment == '' || fragment == 'error') {
													self.endPullUpToRefresh(true);
												} else {
													ul.appendChild(fragment);
													if(data.code == 0 && data.resultSize < pageSize) {
														self.endPullUpToRefresh(true);
													} else {
														self.endPullUpToRefresh();
													}
												}
											})
										} else {
											self.endPullUpToRefresh(true);
										}
									}, 1000);
								}
							}
						});

						if(index == 0) {
							pullToRefresh_0 = pullToRefresh;
						}

						if(index == 1) {
							pullToRefresh_1 = pullToRefresh;
						}
					});

					/**
					 * @param {Object} index 
					 * @param {Object} callback 回调函数
					 */
					function createFragment(index, pageNumber, pageSize, callback) {
						if(index == 0) {
							var param = 'userId=' + getUserId() + '&userType=0&companyCardno=&pageNumber=' + pageNumber + '&random=' + Math.random() + '&pageSize=' + pageSize;
							var url = 'appHttpService/appEleclicenList.do';
							utils.ajax(url, function(data) {
								data = JSON.parse(data);
								callback(data);
							}, param);
						}

						if(index == 1) {
							var param = 'userId=' + getUserId() + '&pageNumber=' + pageNumber + '&random=' + Math.random() + '&pageSize=' + pageSize;
							var url = 'appHttpService/appNetUserLicenseList.do';
							utils.ajax(url, function(data) {
								data = JSON.parse(data);
								callback(data);
							}, param);
						}
					};

					/**
					 * @param {Object} index 选项卡号
					 * @param {Object} data 数据
					 */
					function getAppEleclicenList(index, data) {
						if(index == 0) {
							if(data.code == 0) {
								maxPageNumber_0 = data.maxPageNumber;
								if(data.synDate) {
									document.getElementById('synDate_time').innerText = '最后同步时间：' +data.synDate;
								}

								var temp = JSON.parse(data.eleclicenListJson);
								if(temp != null && temp.length > 0) {
									var fragment = document.createDocumentFragment();
									for(var i in temp) {
										var zzType = "批文";
										if(temp[i].licenseType == 0) {
											zzType = "证照";
										}
										var li = document.createElement('li');
										li.className = 'mui-table-view-cells mui-media';
										var temp_html = "";
										temp_html += "<div class='mui-media-box'>" +
											"<span class='navigate_img bg_blue'><img class='tjfwl' src='../../../images/license/licence.png'></span>" +
											"<div class='mui-media-body'>" +
											"<div class='body_view' id=''><span>【" + zzType + "】" + temp[i].licenseName.trim() + "</span></div>" +
											"<div class='work_time'>" +
											"<span class='licence_num'>证照编号：" + temp[i].licenseNumber + " </span>" +
											"<span class='fr jibei'>" + temp[i].licenseClassifyStatus + "级</span>" +
											"</div>" +
											"<div class='mui-ellipsis'><span>有效期：" + new Date(temp[i].validDate).getDateStr(3) + "</span></div>" +
											"</div>" +
											"</div>" +
											"<div class='evaluate'>" +
											"<a class='show_licence' id=" + temp[i].oid + " typeVal='view'><img src='../../../images/license/show.png'>查看详情</a>" +
											"<a class='show_licence' id=" + temp[i].oid + " typeVal='err' licenseName=" + temp[i].licenseName + "><img src='../../../images/license/wrong.png'>申请报错</a>" +
											"</div>"
										li.innerHTML = temp_html;
										fragment.appendChild(li);
									}
									return fragment;
								} else {
									return '';
								}
							} else {
								return 'error';
							}
						}

						if(index == 1) {
							if(data.code == 0) {
								maxPageNumber_1 = data.maxPageNumber;
								var temp = JSON.parse(data.netUserLicenseListJson);

								document.getElementById('totalRl').innerText = data.totalFileSize + "M"
								document.getElementById('runOut').innerText = data.runOutSpaceSize + "M"

								if(temp != null && temp.length > 0) {
									var fragment = document.createDocumentFragment();
									for(var i in temp) {
										var li = document.createElement('li');
										li.setAttribute('id',"li-"+temp[i].oid);
										li.className = 'mui-table-view-cells mui-media';
										var temp_html = "";
										var date2 =  temp[i].uploadDate ? temp[i].uploadDate.replace(/-/g, '/') : ""
										temp_html += "<div class='mui-media-box'>" +
											"<span class='navigate_img bg_blue'><img class='tjfwl' src='../../../images/license/licence02.png'></span>" +
											"<div class='mui-media-body'>" +
											"<div class='body_view' id=''><span>" + temp[i].licenseName.trim() + "</span><span class='icon-more' id='icon-more-" + temp[i].oid + "' oid=" + temp[i].oid + "></span></div>" +
											"<div class='mui-ellipsis'><span>上传时间：" + new Date(date2).getDateStr(3) + "</span></div>" +
											"</div>" +
											"</div>" +
											"<div class='evaluate'>" +
											"<a class='show_licence' id=" + temp[i].oid + "><img src='../../../images/license/show.png'>查看详情</a>" +
											"</div>"
										li.innerHTML = temp_html;
										fragment.appendChild(li);
									}
									return fragment;
								} else {
									return '';
								}
							} else {
								return 'error';
							}
						}

					}
				});
			})(mui);

			/**
			 * 查看证照详情页面
			 */
			mui("body").on('tap', '#item_ul_1 .evaluate a', function() {
				var oid = this.getAttribute('id');
				var typeVal = this.getAttribute('typeVal');
				if(typeVal == 'view') {
					//查看详情
					showTemplates('my_eleclicen_detail.html', '证照详情', '_www/src/my/licence/my_eleclicen_detail.html?oid=' + oid);
				}

				if(typeVal == 'err') {
					//申请报错
					var licenseName = this.getAttribute('licenseName');
					localStorage.setItem('licenseName', licenseName);
					showTemplates('my_eleclicen_correction.html', '申请报错', '_www/src/my/licence/my_eleclicen_correction.html?oid=' + oid);
				}
			})

			/**
			 * 上传材料
			 */
			document.getElementById('sccl').addEventListener('tap', function() {
				showTemplates('upload_zzcl.html', '上传材料', '_www/src/my/licence/upload_zzcl.html');
			});

			/**
			 * 同步证照库
			document.getElementById('synEleclicenList').addEventListener('tap', function() {
				utils.showWaiting();
				var param = 'userId=' + getUserId();
				var url = 'appHttpService/appSynEleclicenList.do';
				utils.ajax(url, function(data) {
					data = JSON.parse(data);
					closeWaitingAndShowView();
					if(data.code == 0) {
						mui.toast('同步成功');
						setTimeout(function() {
							pullToRefresh_0.pullDownLoading();
						}, 1000)
					} else {
						mui.toast('同步失败！请联系管理员');
					}
				}, param);
			});*/

			/**
			 * 查看材料详情页面
			 */
			mui("body").on('tap', '#item_ul_2 .evaluate a', function() {
				var oid = this.getAttribute('id');
				showTemplates('zzcl_detail.html', '材料详情', '_www/src/my/licence/zzcl_detail.html?oid=' + oid);
			})

			//点击数据弹出操作按钮菜单
			mui("body").on('tap', '#item_ul_2 .icon-more', function() {
				var id = this.getAttribute('id');
				var oid = this.getAttribute('oid');
				getIconMore(id, oid);
			});

			/**
			 * 加载数据后调用点击的方法
			 * @param {Object} id 点击图标的id
			 * @param {Object} oid 数据主键
			 */
			function getIconMore(id, oid) {
				loadMiddlePopoverUl(oid); //给弹出菜单添加按钮值
				mui('#middlePopover').popover('toggle', document.getElementById(id));
			}

			/**
			 * 给弹出菜单添加li标签
			 * @param {Object} oid 主键
			 */
			function loadMiddlePopoverUl(oid) {
				var fragment = document.createDocumentFragment();
				//设置弹出菜单的高度，若高度太低内容太多的话 会遮挡住箭头
				document.getElementById("middlePopover").style.height = 45 * 2 + "px";
				for(var i = 0; i < 2; i++) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					if(i == 0) {
						li.innerHTML = "<a id='" + oid + "' type='1'>删除</a>";
					} else if(i == 1) {
						li.innerHTML = "<a id='" + oid + "' type='2'>修改</a>";
					}
					fragment.appendChild(li);
				}
				jQuery('#middlePopoverUl').html("");
				document.getElementById("middlePopoverUl").appendChild(fragment);
			}
			
			/**
			 * 弹出菜单添加操作
			 */
			mui('#middlePopoverUl').on('tap', 'a', function() {
				var type = this.getAttribute('type');
				var oid = this.getAttribute('id');
				if(type == 2){
				  //修改
				  showTemplates('upload_zzcl.html','修改材料','_www/src/my/licence/upload_zzcl.html?oid='+oid);
			     //隐藏弹框
			     mui('#middlePopover').popover('hide');	
				}else if(type == 1){
				  //删除
				   var param = 'oid=' + oid; 
				    utils.ajax('appHttpService/appDelNetUserLicense.do', function(data) {			  	
				  	data = JSON.parse(data);
					if(data.code == 0) {
						mui.toast("删除成功");
						//删除成功后,刷新列表
						pullToRefresh_1.pullDownLoading();
				  	}else{
				  		mui.toast("删除失败");
				  	}
				   //隐藏弹框
				   mui('#middlePopover').popover('hide');	
				  }, param);
				   
				}
			});
			
			//上传材料后刷新上传材料列表
			window.addEventListener('saveSuccess',function(event){
				//刷新列表
				pullToRefresh_1.pullDownLoading();
			});
		</script>
	</body>

</html>